<!DOCTYPE html>
<html dir="ltr" lang="en-US" >
<head>
<meta charset="UTF-8" />
<meta name="robots" content="index, follow" />

<!-- page title -->
<title>Grandon HTML Template</title>


<!-- add css stylesheets -->	
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/skeleton.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen"/>

<!-- Pretty Photo -->
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"/>


<!--[if gte IE 8]>
	<link rel="stylesheet" media="screen" type="text/css" href="css/ie8up.css" />
<![endif]-->
<!--[if gte IE 9]>
	<link rel="stylesheet" media="screen" type="text/css" href="css/ie8up.css" />
<![endif]-->



<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.html">


<!-- jquery -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
<script src="js/jquery.tipsy.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.iconshadow.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.js"  type="text/javascript"></script>
<script src="js/modernizr.custom.js"  type="text/javascript"></script>
<script src="js/jquery.fitvids.js"  type="text/javascript"></script>
<script src="js/jquery.ui.totop.js"  type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.twitter.js"></script>
 



</head>
<body>	


<!-- Image Back ground and pattern Back ground  -->
   
    <!-- <div id="pattern_bg"></div>  -->
     <img src="images/large/bg.jpg" alt="" id="background" />

<div class="header_top_first">
		<div class="container sixteen columns header_top_inner">
	    	<div class="eight columns align_left">
				<div class="testimonials">
				            <div class="testi_icon"></div>
                        	<ul>
									<li>
                            		<div class="testi-text dro">Welcome to Grandon Marketing solution for any company</div>                                  
                                    </li>
									<li>
                            		<div class="testi-text dro">showing what are you doing to everyone in the world</div>                                  
                                    </li>
									
                            </ul>						
                </div>			
			</div>
			
		
				<div class="top_info">
					<p>
					
                    <a href="#">About us</a>&nbsp; &nbsp;
                    <a href="#">Pricing</a>&nbsp; &nbsp; 
                    <a href="#">Site map</a>

					</p>		
				</div>
						
        </div>  
  <div class="clear"></div>		
</div>

<div class="header_top_second">

<div class="container sixteen columns header_top_second_inner">

<div class="four columns align_left logo"><a href="#"><img src="images/logo.png" alt="" /></a></div>

<div class="contact_head">
   <div class="top_home_wrapper">
    <div class="top_home_icon"></div><h6>Hong kong 32 street, Ladue city </h6>
	<div class="clear"></div>
   </div>   
   <div class="top_home_call"> Tel : +7780-2225-779 </div>
</div>

</div>
<div class="clear"></div>
</div>
		
<!-- Main header -->
<div id="main_wrapper">
	<div class="main_wrapper_inner">
      
      <!-- Header -->
              <div class="header_menu">
			     <div class="header_top_inner">
				    <div class="container sixteen columns">
				         <!-- begin navigation -->
					 <div class="main_menu">
						<nav id="dropdown">
							<ul class="sf-menu clearfix">								
								<li><a href="index.html" class="trigger"><span><i class="icon-home"></i>Home</span></a>
									<ul>
										<li><a href="index-2.html">Style 1</a></li>
										<li><a href="index2.html">Style 2</a></li>
										<li><a href="index3.html">Style 3</a></li>
										<li><a href="index4.html">Style 4</a></li>
										<li><a href="index5.html">Style 5</a></li>
									</ul>
								</li>
								<li><a href="#" class="trigger"><span><i class="icon-feature"></i>Features</span></a>
									<ul>
										<li><a href="about.html">About Us</a></li>
										<li><a href="service.html">Our service</a></li>
										<li><a href="shortcodes.html">shortcodes</a></li>
										<li><a href="tables.html">Table price</a></li>
										<li><a href="#" class="trigger">Example submenu</a>
												    <ul>
														<li><a href="#">submenu test 1</a></li>
														<li><a href="#">submenu test 2</a></li>
														<li><a href="#">submenu test 3</a></li>
													</ul>
										</li>
										<li><a href="full_width_page.html">Full Page</a></li>
										<li><a href="page_right_sidebar.html">Page with Right Sidebar</a></li>
										<li><a href="page_left_sidebar.html">Page with Left Sidebar</a></li>
									</ul>
								</li>
                                <li><a href="about.html" class="trigger"><span><i class="icon-staff"></i>Staffs</span></a></li>	
                                <li><a href="service.html" class="trigger"><span><i class="icon-service"></i>Services</span></a></li>									
								<li><a href="portfolio.html" class="trigger"><span><i class="icon-port"></i>Portfolio</span></a>
									<ul>
										<li><a href="portfolio4.html">Portfolio 4 columns</a></li>
										<li><a href="portfolio3.html">Portfolio 3 columns</a></li>										
										<li><a href="portfolio_single.html">Portfolio single</a></li>
									</ul>
								</li>
								<li><a href="blog.html" class="trigger"><span><i class="icon-blog"></i>Blog</span></a>
									<ul>
										<li><a href="blog.html">Blog Style 1</a></li>
										<li><a href="blog1.html">Blog Style 2</a></li>
										<li><a href="blog2.html">Blog style 3</a></li>
										<li><a href="blog_post.html">Single Blog Post</a></li>										
									</ul>
								</li>
								<li><a href="contact.html"><span><i class="icon-contact"></i>Contact</span></a></li>
								<li><a href="contact.html"><span>Contact</span></a></li>
							</ul>
						</nav>	
                       </div>						
				 <!-- end navigation -->
					</div> <!-- End six teen columns -->
			     </div>
			  </div> <!-- End header top -->
    
	
    <div class="content">		
				
	 <div class="content_wrapper">	
	 <div class="page_title_wrapper">
	    <div class="container sixteen columns">
          <div class="page_title_inner">	      			       	
				<span class="main_t_1"> Shortcodes </span><span class="main_t_2">&nbsp; - &nbsp;  easily to use shortcodes </span>
		  </div>			
        </div>			
      </div> <!-- End page title wrapper -->
	<div class="clear"></div>
	
	  <div class="container">    
		<div class="content_wrapper_inner">
	
         <!-- Start Text -->
        
		<div class="sixteen columns row">
        	<!-- Link Style -->
            <div class="one_half">
            	<h1>Heading Text</h1> 
				<h2>Heading Text</h2> 
				<h3>Heading Text</h3> 
				<h4>Heading Text</h4> 
				<h5>Heading Text</h5> 
				<h6>Heading Text</h6> 
		
            </div>
            <div class="one_half lastcolumn">                           	 
                    <a href="#" class="button">Read More</a>
					<div class="link italic" style="margin:10px;"><a href="#">Read more <span>&rarr;</span></a></div>  
            <div class="notification error">
				<p><span>Error!</span> Please make sure you fill true codes</p>
			</div>

			<div class="notification success">
				<p><span>Success!</span> Awesome, You did it.</p>
			</div>

			<div class="notification warning">
				<p><span>Warning!</span> Every thing can happens</p>
			</div>

			<div class="notification notice">
				<p><span>Info!</span> something just happened!.</p>
			</div>					
            </div><div class="clear"></div>
            
            <!-- 2 column -->
            <div class="one_half">
            	<h6>1/2</h6>
            	<p> 
					<ul class="tabs">
                    <li><a class="active" href="#a0">Who is us?</a></li>
                    <li><a href="#a1">What we do</a></li>
                    <li><a href="#a2">Buy it</a></li>
                </ul>	 
			    <ul class="tabs-content clearfix">
                    <li class="active clearfix" id="a0">
                        <div class="one_third lastcolumn"><p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p></div>
                        <div class="two_third"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. rebum sed diam nonumy eirmod tempom erat.</p></div><div class="clear"></div>
                    </li>
                    <li id="a1" class="clearfix">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                    </li>
                    <li id="a2" class="clearfix">
                        <div class="one_half">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p> 
                        </div>         
                        <div class="one_half lastcolumn">
                            <p>Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
                        </div>
						<div class="clear"></div>
                    </li>
                </ul>
				
				</p> 
				</div>
            <div class="one_half lastcolumn">
            	<h6>1/2</h6>
            	<p><span class="dash_under">Underline Hightlight Text</span> Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br/><br/>
				<blockquote class="top10">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</blockquote>
				</p> 
            </div><div class="clear"></div>
			
			
			       <!-- 2 column -->
            <div class="one_half">
            	<h6>Bar animated</h6>
            	<div class="port_inner">                   
                         <div class="meter animate green">
			               <span style="width: 75%"><span></span></span>
		                 </div>
                         <div class="meter animate blue">
			               <span style="width: 50%"><span></span></span>
		                 </div>
                         <div class="meter animate yellow">
			               <span style="width: 65%"><span></span></span>
		                 </div>
                         <div class="meter animate red">
			               <span style="width: 70%"><span></span></span>
		                 </div>
						 
			   </div><!-- End model port wrapper -->
				</div>
            <div class="one_half lastcolumn">
            	<h6>Bar no animated</h6>
            	<div class="port_inner">                   
                         <div class="meter green">
			               <span style="width: 75%"><span></span></span>
		                 </div>
                         <div class="meter blue">
			               <span style="width: 50%"><span></span></span>
		                 </div>
                         <div class="meter yellow">
			               <span style="width: 65%"><span></span></span>
		                 </div>
                         <div class="meter red">
			               <span style="width: 70%"><span></span></span>
		                 </div>
						 
			   </div><!-- End model port wrapper -->
            </div><div class="clear"></div>
			
			
			<!-- 3 column -->
                   <div class="one_third">
            	<h6>Toggle</h6>
             <div class="accordion-items">
			            <!-- Item -->
						<div class="accordion-item">
							<div class="accordion-item-header"><a href="#" class="active">Who is my competition?</a></div>
							<div class="accordion-item-body">
						         <p>
								   Consectetur adipisicing elit, sed do eiusmod tempor.
								 </p>
							</div>
						</div>
						<!-- Item -->
						<div class="accordion-item">
							<div class="accordion-item-header"><a href="#">How much money?</a></div>
							<div class="accordion-item-body">
								<p>
								   Consectetur adipisicing elit, sed do eiusmod tempor.                                    
								 </p>
							</div>
						</div>
					
				
			 </div>
            </div>
            <div class="one_third">
            	<h6>Arrow List</h6>
            	 <ul class="tick">
                	<li>Great Customizablity</li>
                    <li>Valid HTML 5 Markup</li>
                    <li>Flexible Layout</li>
                    <li>Responsive design</li>
					<li>Page builder</li>
					<li>Drag and Drop Gellary</li>
                </ul>
            </div>
            <div class="one_third lastcolumn">
            	<h6>Normal List</h6>               
				<ul class="square">
                	<li>Great Customizablity</li>
                    <li>Valid HTML 5 Markup</li>
                    <li>Flexible Layout</li>
                    <li>Responsive design</li>
					<li>Page builder</li>
					<li>Drag and Drop Gellary</li>
                </ul>
            </div><div class="clear"></div>
        
        	<!-- 4 column -->
            <div class="one_fourth">
            	<h6>1/4</h6>
            	
               <div class="view view-tenth">				   
                    <img src="images/large/a12.jpg" alt="" class="scale-with-grid" />
                    <div class="mask">
					  <div class="mask_wrapper">                        
                           <a href="images/large/a12.jpg" title="" data-rel="prettyPhoto[portfolio]" class="link1"><img src="images/icons/icon_zoom.png" class="scale-with-grid" /></a>     
                        
                      </div>
					</div>
               </div>
				
            </div>
            <div class="one_fourth">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth lastcolumn">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div><div class="clear"></div>
            
            <!-- 5 column -->
        	<div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth lastcolumn">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div><div class="clear"></div>
            
            <!-- 6 column -->
        	<div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth lastcolumn">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            <br/><div class="clear"></div>
			</div>
			
			
            <!-- Title -->			    
                <h5 class="italic">Video from Vimeo and youtube</h5> <br/>				
            <!-- 2 column Videos -->
            <div class="one_half">
            	<div class="scale_vid">
				    <iframe src="http://player.vimeo.com/video/27973852?title=0&amp;byline=0&amp;portrait=0" width="460" height="240"></iframe>
				</div>
            </div>
            <div class="one_half lastcolumn">
            	<div class="scale_vid"> 
				   <iframe src="http://www.youtube.com/embed/cpniGv99t84?hd=1&amp;wmode=opaque&amp;controls=0&amp;showinfo=0" width="460" height="240"></iframe>
			    </div> 
            </div>
		 <div class="clear"></div>

		</div>

		   
		   
             <div class="clear"></div>
	        

	</div>  <!-- End main page wrapper -->		 
	
    <div class="clear"></div>	
		   </div>  <!-- End container -->	
        </div> 		<!-- End Content wrapper -->
    </div>	<!-- End content -->

    		<!-- Footer -->

         <footer id="footer">	
		  <div class="footer_support">
		      <div class="container sixteen columns">
				  <div class="footer_support_inner">
				     <i class="icon_vid_s"></i>
					 <div class="twelve columns">
					 <div class="text_support"> Video call supporting is the better way to asking us the question, <a href="#">Contact us now 24/7 </a></div>
					 </div>
				     <i class="icon_support_user"></i>
					 <div class="clear"></div>
				  </div>
			  </div>
		  </div> <!-- End support -->   
			<div class="container">
			  <div class="footer_inner"> 
			  
			    <div class="sixteen columns">
			        
				 <div class="four columns clearfix widget alpha">		
                      <div class="widget_text">
					    <img src="images/logo2.png" alt="" class="scale-with-grid" />	
                        <span class="foot_title">Company's name</span><br/>                       
                        <p>We suport 24/7, sed diam nonummy nibh euismod.Lorem ipsum dolor,sed diam nonumy eirmod tempor invid unt utat labore et dolore magna.  </p>
                  
                      </div>
                 </div>
				 
				  <div class="four columns widget">
                    <h5 class="widget_title">Popular blog post</h5>
                    <div class="widget_blogposts">
                        <ul>
                        	<li class="p_widget_inner clearfix">                            	
                                <div class="post_wiget_ti"><a href="#">Join us now, Start it</a></div>
								<img src="images/blog/s3.jpg" alt="" class="scale-with-grid" />	
								<p> 
								 Fames ac turpis egesda tas, vestibulum tortorina quam, feugiat
								</p>
								<div class="sub_date_wrapper">
                                  <span class="left sub_text3">11 Nov 2012</span>
								  <span class="right sub_text3"><a href="#"> 3 comments </a></span><span class="icon_comment"></span>								
								</div>
								<div class="clear"></div>  
                            </li>
                        	<li class="p_widget_inner clearfix">                            	
                                <div class="post_wiget_ti"><a href="#">What is branding</a></div>
								<img src="images/blog/s4.jpg" alt="" class="scale-with-grid" />
								<p> 
								 Fames ac turpis egesda tas, vestibulum tortorina quam, feugiat
								</p>
								<div class="sub_date_wrapper">
                                  <span class="left sub_text3">11 Nov 2012</span>
								  <span class="right sub_text3"><a href="#"> 1 comment </a></span><span class="icon_comment"></span>								
								</div>
								<div class="clear"></div>  
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                 </div>
                
                <div class="four columns widget">
                    <h5 class="widget_title">Latest tweets</h5>
                    <div class="widget_tweets">
                       <div id="twitter"></div>                
				   </div>
                    
                </div>
                          
              <div class="four columns widget omega">
                    <h5 class="widget_title">Contact info</h5>
                <div class="widget_text">
                        <span class="foot_title">Company Location</span><br/>
                        <p>Hang Studios, Hongkar City<br/>
                        Load 32, Lie wei street<br/>
                        Building 32, Maoei, Hongkong</p>
                        
                        <span class="foot_title">How To Contact Us</span><br/>
                        <span class="icon_mail sub_text2"> <a href="mailto:your@email.com">you@yourdomain.com</a></span><br/>
                         <span class="icon_tele2 sub_text2"> 968-442-3301</span>
                </div>
              </div>
			
			
			
                 </div>
			   </div>
            </div>
		 </footer> <!-- End Footer -->


          <!-- Sub footer -->
		
		<div id="subfooter_wrapper">
		   <div class="container">
    	    <div class="subfooter">
        	<div class="eight columns power_bt">
			@ Mark 2 WordPress Theme by Decneo. - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>			
			</div>
			
            <div class="eight columns">
			    <div class="social_wrapper">  
							<a href="#"><img src="images/facebook.png" alt="Twitter"/></a>
							<a href="#"><img src="images/google.png" alt=""/></a>
							<a href="#"><img src="images/twitter.png" alt=""/></a>
							<a href="#"><img src="images/fr.png" alt=""/></a>
							<a href="#"><img src="images/youtube.png" alt=""/></a>
							<a href="#"><img src="images/rss.png" alt=""/></a>	
				</div>
            </div>
            </div>
			</div>
        </div> <!-- End Sub footer -->
		
	</div> <!-- End main_wrapper_inner -->	   
</div> <!-- End main_wrapper -->
</body>
</html>